<template>
  <div style="background: darkgrey">
    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      style="position: sticky; top: 0; z-index: 999"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../img/4 (1).png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../img/4 (11).jpeg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../img/4 (13).jpeg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../img/4 (7).jpeg" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- 宫格 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="value in 1"
        :key="value"
        icon="/src/views/img/1%20(1).png"
        text="热门推荐"
      />
      <van-grid-item
        v-for="value in 1"
        :key="value"
        icon="/src/views/img/1%20(2).png"
        text="本店特卖"
      />
      <van-grid-item
        v-for="value in 1"
        :key="value"
        icon="/src/views/img/2%20(1).png"
        text="优选新品"
      />
      <van-grid-item
        v-for="value in 1"
        :key="value"
        icon="/src/views/img/2%20(2).png"
        text="网红爆款"
      />
      <van-grid-item
        v-for="value in 1"
        :key="value"
        icon="/src/views/img/3(1).png"
        text="天天特价"
      />
    </van-grid>

    <van-card
    v-for="item in data"
    :key="item.id"
      :desc="item.name"
      :title="item.title"
      :thumb="item.url"
      :price="item.price"
      @click="toxiang(item)"
    />
    <!-- <dl v-for="item in xr" @click="toxiang">
      <dt>
        <img :src="item.src" alt="" />
      </dt>
      <dd>
        <p>{{ item.js }}</p>
        <p style="color: red">￥{{ item.price }}.00</p>
      </dd>
    </dl> -->
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
//跳转
import { useRouter } from "vue-router";
let router = new useRouter();

// let xr = ref([
//   { src: "/src/views/img/3(18).jpeg", js: "可视角度办个卡", price: 16 },
//   { src: "/src/views/img/3(10).jpeg", js: "可视角度办个卡", price: 41 },
//   { src: "/src/views/img/3(7).jpeg", js: "可视角度办个卡", price: 17 },
//   { src: "/src/views/img/3(9).jpeg", js: "可视角度办个卡", price: 27 },
//   { src: "/src/views/img/3(10).jpeg", js: "可视角度办个卡", price: 73 },
//   { src: "/src/views/img/3(18).jpeg", js: "可视角度办个卡", price: 45 },
//   { src: "/src/views/img/3(7).jpeg", js: "可视角度办个卡", price: 53 },
//   { src: "/src/views/img/3(9).jpeg", js: "可视角度办个卡", price: 72 },
//   { src: "/src/views/img/3(10).jpeg", js: "可视角度办个卡", price: 37 },
//   { src: "/src/views/img/3(7).jpeg", js: "可视角度办个卡", price: 45 },
// ]);

// const toxiang = (v) => {
//   router.push({
//     path: "/xiang/" + v.id,
//     query: v,
//   });
// };



const data=ref([])
const getData=async()=>{
    const resp=await axios.get('/api/room/list')
    console.log(resp.data.data.list)
    data.value=resp.data.data.list
}
const toxiang=(v)=>{
    router.push({
        path:'/xiang/'+v.id,
        query:v
    })
}
getData()
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.my-swipe img {
  width: 100%;
  height: 200px;
}
dl {
  width: 150px;
  float: left;
  margin-left: 25px;
  height: 250px;
  background: white;
}
dl dt img {
  width: 150px;
  height: 150px;
}
</style>
